$(function () {
  // 1. 侧边栏绑定点击事件
  $('.box > ul > li').on('click', function() {
    $(this).parent().find('li').removeClass('active').eq($(this).index()).addClass('active')
    $('form').removeClass('active').eq($(this).index()).addClass('active')
  })

  // 2. 头像绑定 change 事件
  $('form > label > input[type=file]').on('change', function () {
    const fileInfo = this.files[0]
    if (!fileInfo) reuturn
    if (fileInfo.type.split('/')[0] !== 'image') return
    // 创建一个 FileReader
    const fr = new FileReader()
    fr.readAsDataURL(fileInfo)
    fr.onload = res => {
      $('form > label > .avatar').css('background-image', `url(${res.currentTarget.result})`)
    }
  })

  // 3. 个人信息表单绑定提交事件
  $('form#info').on('submit', async e => {
    e.preventDefault()
    const fm = new FormData($('form')[0])
    const res = await $.ajax({
      url: '/users/update',
      method: 'POST',
      data: fm,
      processData: false,
      contentType: false
    })
    if (res.code === 1) return alert('信息修改成功')
  })

  // 4. 修改密码表单绑定提交事件
  $('form#pwd').on('submit', async e => {
    e.preventDefault()
    const oldPwd = $('.oldPwd').val()
    const newPwd = $('.newPwd').val()
    const rPwd = $('.rPwd').val()
    console.log(oldPwd, newPwd, rPwd)
    if (!oldPwd || !newPwd || !rPwd) return $('form#pwd > span').text('表单必填!').css('display', 'block')
    if (newPwd !== rPwd) return $('form#pwd > span').text('两次密码不一致!').css('display', 'block')
    $('form#pwd > span').css('display', 'none')
    const res = await $.ajax({
      url: '/users/password',
      method: 'PATCH',
      data: { oldPwd, newPwd, rPwd },
    })
    if (res.code === 0) return $('form#pwd > span').text(res.message).css('display', 'block')
    if (res.code === 1) {
      window.alert('密码修改成功')
    }
  })
})
